<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap 模板</title>
	  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" charset="UTF-8" >
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
      <link href="nivo/nivo-slider.css" rel="stylesheet">
      <link href="themes/bar/bar.css" rel="stylesheet">
      <link href="themes/dark/dark.css" rel="stylesheet">
      <link href="themes/default/default.css" rel="stylesheet">
      <link href="themes/light/light.css" rel="stylesheet">
      <script src="bootstrap/js/jquery-1.11.1.min.js"></script>
      <script src="bootstrap/js/bootstrap.min.js"></script>
       <script src="nivo/jquery.nivo.slider.pack.js"></script>
      <!--[if lt IE 9]>
         <script src="js/html5shiv.js"></script>
         <script src="js/respond.min.js"></script>
      <![endif]-->
   </head>
   <style>
   body{padding-top:70px}
   </style>
   <body>
   	<div class="container theme-default">
   		<div class="slider-wrapper nivoSlider">
   			<img  src="images/nemo.jpg" data-thumb="mages/nemo.jpg" title="海底总动员"/>
   			<img  src="images/toystory.jpg"  data-thumb="images/toystory.jpg" title="玩具总动员"/>
   			<img  src="images/up.jpg"  data-thumb="images/up.jpg" title="会飞的房子"/>
   			<img  src="images/walle.jpg"  data-thumb="images/walle.jpg" title="机器人瓦力" data-transition="fade"/>
   		</div>
   	</div>
   </body>
   <script>
   	$('.nivoSlider').nivoSlider({
   		pauseTime:1000,//延迟时间，下面跳转时间
   		animSpeed:600,//图片观看时间
   		directionNav:true,//方向导航
   		controlNavThumbs:true,
   		controlNav:true,//控制导航
   		pauseOnHover:true,
   		manualAdvance:false,//手动切换图片true
   		controlNavThumbs:true,//显示缩略图
   		//effect:'fade',//淡入淡出样式
   		effect:'fold',//百叶窗样式
   	});
   </script>
</html>